<template>
    <div>
        <div class="content">
            <navgistor 
                :title="'修改密码'"
                :left="true" 
            ></navgistor>
            <div class="list">
                <span>
                    新密码:
                </span>
                <input type="password" placeholder="请输入新密码" v-model="obj.loginPassword">
            </div>
            <div class="list">
                <span>
                确认新密码:
                </span>
                <input type="password" placeholder="请再次输入新密码" v-model="obj.loginRePassword">
            </div>
            <div class="btn">
                <button @click="submit()">
                    确认修改
                </button>
            </div>
        </div>
    </div>
</template>
<script>
    import {
        forgetPassword
    } from '@/api'
    import navgistor from '@/components/nav-head'
    export default {
        components:{
            navgistor
        },
        data(){
            return {
                obj:{
                    loginPassword: "",
                    loginRePassword: ""
                }
            }
        },
        methods:{
            submit(){
                // console.log(this.obj);
                if(this.obj.loginPassword.length < 6){
                    this.$Message.error('密码长度不能小于6位');
                    return
                }
                if(this.obj.loginPassword != this.obj.loginRePassword){
                    this.$Message.error('两次密码输入不一致');
                    return
                }
                // 调用修改密码接口
                forgetPassword(this.obj).then(res => {
                    if(res.data.code == 1){
                        this.$Message.success('修改成功');
                        setTimeout(() => {
                           // 先清空本地
                            localStorage.clear();
                            // 再跳转登录页
                            this.$router.push({
                                path: '/login'
                            }) 
                        }, 1500);
                    }
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
.content{
    height: 100vh;
    padding-top: 44px;
    background-color: #f4f4f4;
    .list{
        width: 100%;
        height: 50px;
        line-height: 50px;
        padding: 0 2%;
        background-color: #fff;
        border-bottom: 1px solid #f4f4f4;
        display: flex;
        justify-content: space-between;
        input{
            width: 70%;
            border: 0;
            outline: 0;
        }
        span{
            display: inline-block;
            width: 25%;
            text-align: right;
        }
    }
    .btn{
        width: 100%;
        text-align: center;
        margin-top: 50px;
        button{
            width: 80%;
            height: 40px;
            line-height: 40px;
            border: 0;
            outline: 0;
            background-color: rgb(50, 134, 255);
            color: #fff;
            border-radius: 5px;
        }
    }
}
</style>